<template>
  <view class="banList appFlex-two" @click="goMusicList()">
    <!-- 左边图片 -->
    <view class="left">
      <image :src="listData.coverImgUrl" mode="" />
      <!-- 更新时间 -->
      <view class="tpdataTime">刚刚更新</view>
    </view>
    <!-- 右边前三条歌曲 -->
    <view class="right appFlex-three">
      <view v-for="(item, index) in topThree" :key="index"
        >{{ index + 1 }}.{{ item.songs[0].name }}-{{
          item.songs[0].ar[0].name
        }}</view
      >
    </view>
  </view>
</template>

<script>
export default {
  props: {
    //排行榜详情
    listData: {
      type: Object,
    },

    musitList: {
      type: Array,
    },
  },
  data() {
    return {
      musicData: [], //音乐数据
      topThree: [], //前三条音乐
    };
  },
  onLoad() {},
  watch: {
    musitList(newValue, oldValue) {
      for (let i = 0; i < newValue.length; i++) {
        let ids = newValue[i].id;
        this.getMusicDet(ids);
      }
    },
  },

  methods: {
    //获取歌曲详情
    getMusicDet(ids) {
      this.request("/song/detail", "GET", { ids }).then((res) => {
        this.musicData.push(res);
        if (this.musicData.length == 3) {
          this.topThree = this.musicData.splice(0, 3);
        }
      });
    },
    // 跳转到榜单列表
    goMusicList() {
      uni.navigateTo({
        url:
          "/pagesA/musicList/MusicList?musitList=" +
          JSON.stringify(this.musitList) +
          "&id=" +
          this.listData.id,
      });
    },
  },
};
</script>

<style lang="less">
.banList {
  margin-top: 30rpx;
  padding: 0 15px;
  width: calc(750rpx - 30rpx);
  height: 300rpx;
  .left {
    position: relative;
    width: 300rpx;
    height: 300rpx;
    image {
      width: 300rpx;
      height: 300rpx;
      border-radius: 30rpx;
    }
    .tpdataTime {
      position: absolute;
      left: 20rpx;
      color: #fff;
      font-size: 22rpx;
    }
  }
  .right {
    margin-left: 30rpx;
    width: 700rpx;
    height: 300rpx;
    color: #999;
    font-size: 25rpx;
  }
}
</style>